import { IconDown } from '@arco-design/web-react/icon';

import { Badge, Dropdown, Menu } from '@arco-design/web-react';

import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { logoutRequest } from '../redux/logoutReducer';
import { AppStore } from '../types';
import { confirmDialog } from './dialog';
import { MenuTypes } from './mainNavBar';
import { IconNotification } from './svg/svgIcon';
import { useState } from 'react';
import main from '@src/main';

interface Props {
  menu: MenuTypes[];
  current?: string;
  onChange: (menu?: MenuTypes) => void;
}

export default function SecondNavBar({ menu, current, onChange }: Props) {
  const user = useSelector((state: AppStore) => state.user);
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const [watermark, setWatermark] = useState(main.watermark);
  // 用户下拉菜单内容
  const dropdownItems = (
    <Menu>
      <Menu.Item key="1" onClick={handleToAccount}>
        个人中心
      </Menu.Item>
      <Menu.Item key="2" onClick={handleWatermark}>
        {watermark ? '关闭水印' : '开启水印'}
      </Menu.Item>
      <Menu.Item key="99" onClick={handleLogout}>
        退出登录
      </Menu.Item>
    </Menu>
  );

  function handleWatermark() {
    let show = !watermark;
    setWatermark(show);
    main.createWatermark(show);
  }

  function handleToAccount() {
    onChange();
    navigate('/account');
  }

  // 用户信息下拉菜单点击
  async function handleLogout() {
    let modalRes = await confirmDialog({ content: '确定要退出登录吗?' });
    if (modalRes !== 1) return;
    onChange();
    dispatch(logoutRequest());
    navigate('/login', { replace: true });
  }

  return (
    <div className="second-nav-bar">
      <div className="second-nav-bar-item-block">
        {menu.map((item, idx) => (
          <div
            key={item.key + idx}
            onClick={() => onChange(item)}
            className={`second-nav-bar-item ${current === item.key ? 'active' : ''} omit-text`}
          >
            {item.label}
          </div>
        ))}
      </div>

      <div className="nav-icon nav-base ml-20 text-second-color cursor-pointer">
        <Badge count={0}>
          <IconNotification className="font-16 text-second-color" onClick={() => navigate('/system/notice/index')} />
        </Badge>
      </div>
      <Dropdown droplist={dropdownItems} position="br" trigger="click">
        <span
          className="d-flex-r ai-center ml-20 mr-20 text-second-color font-12 maxw-140 cursor-pointer"
          onClick={(e) => e.preventDefault()}
        >
          {user?.user?.userName ?? user?.user?.nickName}
          <IconDown />
        </span>
      </Dropdown>
    </div>
  );
}
